<template>
  <div class="foot">
    <ul class="clearFloat">
      <li class="li_det">
        <a href="javascript:;">
          <div class="ig ig_det2"></div>
          <p>供货商</p>
        </a>
      </li>
      <li class="li_det">
        <router-link :to="{path: '/cart'}">
          <div class="ig ig_det3"></div>
          <p>购物车</p>
        </router-link>
      </li>
      <li class="li_det1">
        <a href="javascript:;">
          <p>立即购买</p>
        </a>
      </li>

    </ul>
  </div>
</template>

<script>
    export default {
        name: "BuyCart"
    }
</script>

<style lang="scss"  scoped>
  @import "../../style/common";
  @import "../../style/mixin";
  .foot{position: fixed;bottom: 0;width: 100%;background: #fff;border-top: solid 1px #F5F4F9;z-index: 1000;height: 1.16rem;}
  .foot ul li{width: 25%;float: left;height: 1.16rem;}
  .foot ul li a{display: block;height: 100%;width: 100%;}
  .foot ul li .ig{margin-top: 0.22rem;height: 0.48rem;}
  .foot ul li p{text-align: center;line-height: 100%;color: #4A4A4A;font-size: 0.18rem;margin-top: 0.13rem;}
  .foot ul li.li_active p{color: #FA2F5D;}
  .foot ul li:hover p{color: #FA2F5D;}
  .foot ul li.li_det .ig_det2 {background: url('../../images/det_mall.png') no-repeat center;background-size: auto 0.48rem;}
  .foot ul li.li_det .ig_det3 {background: url('../../images/det_car.png') no-repeat center;background-size: auto 0.48rem;}
  .foot ul li.li_det{width: 2.25rem;}
  .foot ul li.li_det1{width: 3rem;background: #FA2F5D;}
  .foot ul li.li_det1 p{height: 1.16rem;color: #fff;line-height: 1.16rem;margin: 0;font-size: 0.3rem;}
  .detail_comments{text-align: center;margin-bottom: .2rem;}
</style>
